require(['./config'], () =>{
    require(['template','header','footer'], (template, header) => {
        class Shopping {
            constructor() {
                this.render ()
                this.checksChange ()
                this.setAllCheckStatus ()
                this.calcTotalMoney ()
                this.nextshoppng ()
                this.gonvshopping () 
                this.removelocal () 
            }
            render () {
                const cart = localStorage.getItem('cart')
                if(cart) {
                    this.cart = JSON.parse(cart)
                    $('#shoppingcent').html(template('cartshopping' , {cart : this.cart}))
                }
                else{
                    $('#shoppingcent').hide()
                    $('#shopnull').show()
                }
            }
            checksChange () {
                const _this = this
                $('.checks').on('change' ,function () {
                    const id = Number($(this).parents('.p-div').attr('data-id'))
                    _this.cart = _this.cart.map(shop => {
                        if(shop.id === id) shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart',JSON.stringify(_this.cart)) 
                    _this.calcTotalMoney ()
                    _this.setAllCheckStatus ()
                })
                
            }
            setAllCheckStatus () {
                if(this.cart) {
                    const allCheck = this.cart.every(shop => shop.check)
                    $('#all-check').prop('checked', allCheck)
                    if(this.cart.length === 0) {
                        $('#all-check').prop('checked', false)
                    }
                }
            }

            calcTotalMoney () {
                if( this.cart) {
                    const money = this.cart.reduce((total,shop) => {
                        if(shop.check) total += shop.count * shop.price
                        return total
                    },0)
                    $('#shopmoney').html(money.toFixed(2))
                }else{
                    $('#shopmoney').html('0.00')
                }
            }
            nextshoppng () {
                const _this = this
                $('.next').on('click', function () {
                    let cart = localStorage.getItem('cart')
                    this.cart = JSON.parse(cart)
                    const id = Number($(this).parents('.p-div').attr('data-id'))
                    let val = 0
                    _this.cart = _this.cart.map(shop => {
                        if(shop.id === id) {
                            shop.count++
                            val = shop.count
                        }
                        return shop
                    })
                    _this.calcTotalMoney()
                    $(this).prev(".shopcunt").text(val)
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    header.cartnumshop ()
                })
            }
            gonvshopping () {
                const _this = this
                $('.gonv').on('click', function () {
                    let cart = localStorage.getItem('cart')
                    this.cart = JSON.parse(cart)
                    const id = Number($(this).parents('.p-div').attr('data-id'))
                    let val = 0
                    _this.cart = _this.cart.map(shop => {
                        if(shop.id === id) {
                            if(shop.count <= 1) {
                                shop.count = 1
                            }else{
                                shop.count--
                            }
                            val = shop.count
                        }
                        return shop
                    })
                    _this.calcTotalMoney()
                    $(this).next(".shopcunt").text(val)
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    header.cartnumshop()
                })
            }
            removelocal () {
                let cart = localStorage.getItem('cart')
                const _this = this
                $(".span-del").on('click', function () {
                    const id = Number($(this).parents('.p-div').attr('data-id')) 
                    const removerid = [id]
                    _this.cart = _this.cart.filter(shop => {
                        return removerid.indexOf(shop.id) === -1
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    if(_this.cart) {
                        if(_this.cart.length === 0) {
                            $('#shoppingcent').hide()
                            $('#shopnull').show()
                            _this.setAllCheckStatus()
                            localStorage.removeItem('cart')
                            header.cartnumshop ()
                        }
                    }
                    $(this).parents('.p-div').remove()
                    _this.calcTotalMoney()
                    header.cartnumshop ()
                })
            }
        }
        new Shopping ()
    })
})